import React from 'react';
import {inject, observer} from 'mobx-react';
import {Button} from 'antd';
import {WeaTop, WeaRightMenu, WeaTab, WeaSearchGroup, WeaInput, WeaSelect, WeaTools, WeaLocaleProvider} from 'ecCom';
import {Form} from 'antd';
import {WeaSwitch} from 'comsMobx'
import {WeaTableNew,WeaLogView} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import AddWorkModel from './AddWorkModel';
import * as workplanUtil from '../../util/workplanUtil';
import WorkPlanCreate from '../../public/workPlanCreate/index';
import * as PLANMODULAPI from '../../apis/planModul';
import '../../style/planModul.less';
const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;
const WeaLogViewComp = WeaLogView.Component;

@inject('workPlanExchangeStore')
@inject('planModulStore')
@observer
class PlanModul extends React.Component {

  constructor() {
    super();
    //不知道为什么getNewColumns的this指向会指向window
    // this.getNewColumns = this.getNewColumns.bind(this);
    this.state={
      showLog:false,
      targetId:-1,
    }
  }

  //在第一次渲染时加载表格的相关数据和初始化添加计划模板的相应表单域
  componentDidMount() {
    const {planModulStore} = this.props;
    planModulStore.initData();
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.location && this.props.location.key !== nextProps.location.key) {
        const { planModulStore } = this.props;
        planModulStore.doSearch()
    }
  }

  componentWillUnmount(){
    const { planModulStore } = this.props;
    planModulStore.ifShowSearchAd = false;
  }

  workPlanCreateChangeTab = (newKey) => {
    planModulStore.setActiveKey(newKey)
  }

  workPlanCreateDoClose = () => {
    const {planModulStore} = this.props;
    planModulStore.closeCreateWP();
    //为了在我的日程页面显示正确而设置
    this.props.workPlanExchangeStore.setActiveKey('1');
  }

  workPlanCreateOnlyClose = () => {
    const {planModulStore} = this.props;

    planModulStore.closeCreateWP();
    planModulStore.doSearch();
    //为了在我的日程页面显示正确而设置
    planModulStore.setActiveKey('1');
  }

  onEnterSearch = () => {
    const {planModulStore} = this.props;
    console.log('planModulStore....');
    planModulStore.doSearch();
    planModulStore.setShowSearchAd(false);
  }

  render() {
    const {planModulStore} = this.props;
    const {comsWeaTableStore} = planModulStore;
    let collectParams={
      favname: getLabel(27911,'周期日程'),
      favouritetype: 5,
      objid: 0,
      importantlevel: 1,
    }
    return (
      <div className="workplan-modul">
        <WorkPlanCreate ecId={`${this && this.props && this.props.ecId || ''}_WorkPlanCreate@r0pifo`}
          type={'edit'}
          visible={planModulStore.ifShowCreateWP}
          needHideBack={true}
          doClose={this.workPlanCreateDoClose}
          //关闭回调,只做关闭操作
          onlyClose={this.workPlanCreateOnlyClose}
          workPlanId={planModulStore.workPlanId} //日程id
          activeKey={planModulStore.activeKey}
          changeTab={this.workPlanCreateChangeTab}
        />
        <AddWorkModel ecId={`${this && this.props && this.props.ecId || ''}_AddWorkModel@mrij7z`}></AddWorkModel>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@tt1lmz`} datas={workplanUtil.getRightMenu(planModulStore, comsWeaTableStore)}  collectParams={collectParams}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@em6xpv`}
            title={getLabel(27911,'周期日程')}
            loading={planModulStore.loading}
            icon={<i className='icon-coms-schedule'/>}
            iconBgcolor='#6D3CF8'
            showDropIcon={true}
            buttons={workplanUtil.getTopButtons(planModulStore, getLabel(611,'添加'), comsWeaTableStore)}
            dropMenuDatas={workplanUtil.getRightMenu(planModulStore, comsWeaTableStore)}
            dropMenuProps={{ collectParams:collectParams}}
          >
            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@e5f9qv`}
              searchType={['base', 'advanced']}
              showSearchAd={planModulStore.ifShowSearchAd}
              //这里接收的是切换显隐之后相应的bool值
              setShowSearchAd={bool => {
                planModulStore.setShowSearchAd(bool)
              }}
              searchsBaseValue={planModulStore.form.getFormParams()['planName']}
              searchsAd={workplanUtil.getSearchs(planModulStore, this.onEnterSearch)}
              buttonsAd={workplanUtil.getTabButtonsAd(planModulStore)}
              onSearch={v => {
                planModulStore.doSearch()
              }}
              onSearchChange={v => {
                planModulStore.setFormFields({planName: {value: v}})
              }}
              advanceHeight={180}
            />

            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@yg9pqb`}
              // sessionkey={ planModulStore.dataKey }
              hasOrder={true}
              needScroll={true}
              onOperatesClick={this.onOperatesClick}
              comsWeaTableStore={comsWeaTableStore}
              getColumns={this.getNewColumns}
            />

          </WeaTop>

          <WeaLogViewComp ecId={`${this && this.props && this.props.ecId || ''}_WeaLogViewComp@bc99pn`}
            visible={this.state.showLog}
            onCancel={this.getWealogViewCancel}
            logStore={planModulStore.logStore}
            logType={11}
            logSmallType={6}
            targetId={this.state.targetId}
          />

        </WeaRightMenu>
      </div>
    )
  };

  getWealogViewCancel = () => {
    this.setState({showLog: false});
  }

  onOperatesClick = (record, index, operate, flag, argumentString) => {
    let planModulStore = this.props.planModulStore;
    if (operate.index == 0) {
      PLANMODULAPI.createWorkPlan({id: record.randomFieldId}).then(data => {
        planModulStore.setWorkPlanId(data.id);
        planModulStore.setActiveKey('1');
        planModulStore.openCreateWP();
      });
    }else if (operate.index == 1) {
      workplanUtil.doMultiDelete(...['MyDoc', record.randomFieldId, planModulStore]);
    }else if (operate.index == 2) {
      this.setState({showLog: true, targetId: record.id});
    }
  }


  //自定义过滤渲染
  getNewColumns = (columns) => {
    let newColumns = '';
    newColumns = columns.map(column => {
      let newColumn = column;
      //表格的标题列的前端元素改造
      if (newColumn.dataIndex === 'id') {

        newColumn.render = (text, record, index) => {
          //通过record获取到当前行相对应的name
          const name = record.idspan.replace(/<([^<>]+)>/g, '');
          return (
            <div className="wea-url noWrap" title={name}>
              <a
                href="javascript:;"
                onClick={() => {
                  const {planModulStore} = this.props;
                  planModulStore.setIfHideSomeAboutFieldObj();
                  planModulStore.doEdit(record.id);
                }}
                className="noWrap"
                title={name}
                style={{ wordBreak: 'break-all' }}
              >
                {name}
              </a>
            </div>
          );
        };
      }
      return newColumn;
    });
    return columns;
  }


}

export default PlanModul;
